.basic_layout {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}
.basic_flex_wrap {
  display: flex;
  justify-content: space-between;
  background-color: #f0f0f0;
  padding: 4px 8px;
  box-sizing: border-box;
  .search {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 16px;
  }
  .flex_item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 8px;
    .title {
      font-weight: bold;
      font-size: 15px;
    }
  }
}
.container {
  &:extend(.basic_layout all);
  overflow-y: auto;
  margin: 10px 0;
  padding-right: 8px;
  box-sizing: border-box;
  .chainnel_fact {
    &:extend(.basic_layout all);
    .Flex_wrap {
      &:extend(.basic_flex_wrap all);
    }

    .Grid_wrap {
      display: flex;
      column-gap: 8px;
      .grid_item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        border: 1px solid #909090;
        height: 200px;
        padding: 16px;
        box-sizing: border-box;
        .title {
          color: #909090;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          column-gap: 16px;
          font-size: 15px;
          .text {
          }
          .icon {
          }
        }
        .content {
          display: flex;
          align-items: center;
          column-gap: 16px;
          .today {
            font-size: 36px;
            font-weight: bold;
          }
          .yesterday {
            color: #909090;
            display: flex;
            column-gap: 5px;
            .red {
              color: red;
            }
            .green {
              color: #52c41a;
            }
          }
        }
      }
    }
  }

  .trend_chart,
  .Table {
    &:extend(.basic_layout all);
    .Flex_wrap {
      &:extend(.basic_flex_wrap all);
    }
  }
}

.chart_box {
  width: 100%;
  height: 400px;
}
